<template>
  <div class="tellogin">
    <div class="title">
      <h4>手机号快速登录</h4>
      <p>未注册手机号验证码后将自动登录</p>
    </div>
    <div class="pic"><img src="../../public/image/272@2x.png" alt="" /></div>
    <div class="telmessage">
      <h4 v-text="telphonepwd"></h4>
      <p><span v-text="server"></span>为您服务</p>
    </div>
    <!-- 按钮 -->
    <van-button class="btn" round hairline type="primary" color="#FF522E">同意协议并一键登录</van-button>
    <!--  -->
    <!-- 同意《萌宠用户协议》和《萌宠隐私政策》 -->
    <div class="agree">
      <van-checkbox v-model="checked" icon-size="0.24rem"
        ><span class="text1">登录注册代表同意</span>
        <span class="text2">《萌宠用户协议》和《萌宠隐私政策》</span></van-checkbox
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return { telphone: '13333333333', servers: ['中国联通', '中国移动', '中国电信'], checked: false }
  },
  computed: {
    // 正则判断手机号运营商
    telphonepwd() {
      var reg = /(1\d{2})(\d{4})(\d{4})/gi
      return this.telphone.replace(reg, '$1****$3')
    },
    server() {
      let telphone = this.telphone
      var isChinaMobile = /^((13[4-9])|(15([0-2]|[7-9]))|(18[2|3|4|7|8])|(178)|(147))[\d]{8}$/ //移动
      var isChinaUnion = /^((13[0-2])|(145)|(15[5-6])|(176)|(18[5-6]))[\d]{8}$/ //联通
      var isChinaTelcom = /^((133)|(153)|(18[0|1|9])|(177))[\d]{8}$/ //电信
      var isOtherTelphone = /^170([059])\\d{7}$/ //其他运营商
      if (telphone.length !== 11) {
        return '未检测到正确的手机号码'
      } else {
        if (isChinaMobile.test(telphone)) {
          return '中国移动'
        } else if (isChinaUnion.test(telphone)) {
          return '中国联通'
        } else if (isChinaTelcom.test(telphone)) {
          return '中国电信'
        } else if (isOtherTelphone.test(telphone)) {
          var num = isOtherTelphone.exec(telphone)
          console.log(num)
          return '其他运营商'
        } else {
          return false
        }
      }
    },
  },
  methods: {},
}
</script>

<style scoped lang="less">
.tellogin {
  width: 100%;
  .title {
    width: 3.9rem;
    height: 0.98rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-top: 2.67rem;
    margin-left: 1.82rem;
    h4 {
      font-size: 0.34rem;
    }
    p {
      font-size: 0.26rem;
    }
  }
  // pic
  .pic {
    width: 2.15rem;
    height: 2.56rem;
    margin-top: 0.87rem;
    margin-left: 2.68rem;
    img {
      width: 100%;
    }
  }
  // telmessage
  .telmessage {
    width: 2.6rem;
    height: 0.82rem;
    margin-left: 2.45rem;
    margin-top: 0.53rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    h4 {
      font-size: 0.34rem;
    }
    p {
      font-size: 0.26rem;
    }
  }
  // btn
  .btn {
    margin-left: 1.26rem;
    margin-top: 0.77rem;
    width: 4.98rem;
    height: 0.8rem;
  }
  //agree
  .agree {
    margin-top: 0.97rem;
    margin-left: 1.6rem;
    width: 4.52rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.2rem;
  }
}
</style>
